<template>
    <view class="bg-content">
        <u-swiper :list="slideList" name="content" duration="2000" height="650" img-mode="scaleToFill" :autoplay="true" :circular="false"></u-swiper>
        <div v-if="tbGoods" style="padding: 15px; background: #FFFFFF; margin-bottom: 10px;">
            <div style="display: flex; margin-top: 10px; margin-bottom: 10px;">
                <div style="padding-top: 6px; font-size: 14px; color: red;">
                    ￥
                </div>
                <div style="font-size: 20px; font-weight: bold;color: red;">
                    {{tbGoods.price | toFixed2}}
                </div>
            </div>
            <div style="font-size: 16px;">
                {{tbGoods.title}}
            </div>
            <div style="font-size: 12px;" v-if="tbGoods.subTitle">
                {{tbGoods.subTitle}}
            </div>
            <div style="padding: 6px 0px;" v-if="tbGoods.tbStore.saleMode == '0'">快递：
                <label v-if="tbGoods.tbStore.freightType == 0">
                    <label v-if="tbGoods.tbStore.freightMoney == 0">免邮</label>
                    <label v-if="tbGoods.tbStore.freightMoney != 0">
                        每笔订单固定运费{{tbGoods.tbStore.freightMoney | toFixed2}}元
                    </label>
                </label>
                <label v-if="tbGoods.tbStore.freightType == 1">
                    <label v-if="tbGoods.tbStore.freightMoney == 0">免邮</label>
                    <label v-if="tbGoods.tbStore.freightMoney != 0">
                        每笔订单不满{{tbGoods.tbStore.freeFreightMinOrderMoney | toFixed2}}元,运费{{tbGoods.tbStore.freightMoney | toFixed2}}元
                    </label>
                </label>
            </div>
        </div>
        <div v-if="tbGoods" style="margin-bottom: 60px">
            <u-card :title="'优惠券'" margin="0px 0px 10px 0px" :border="false" border-radius="0" v-if="tbGoods.tbStore.tbStoreCouponList.length">
                <view class="" slot="body">
                    <u-tag class="u-tag-group-line" type="error" mode="plain" style="margin-right: 5px; margin-bottom: 5px;"
                           v-for="(item, index) of tbGoods.tbStore.tbStoreCouponList" :key="item.id"
                           :text="`满${toFixed2(item['orderMoney'])}元减${toFixed2(item['couponMoney'])}元`" @click="showCouponList()"/>
                </view>
            </u-card>
            <u-card :title="'店铺促销活动'" margin="0px 0px 10px 0px" :border="false" border-radius="0" v-if="tbGoods.tbStore.tbStorePromotion">
                <view class="" slot="body" @click="showTbStorePromotion()">
                    <u-tag class="u-tag-group-line" type="error" mode="plain" style="margin-right: 5px; margin-bottom: 5px;"
                           v-for="(item, index) of tbGoods.tbStore.tbStorePromotion.typeTextList" :key="index"
                           :text="item['typeText']" @click="showTbStorePromotion()"/>
                </view>
            </u-card>

            <u-card margin="0px 0px 10px 0px" :border="false" border-radius="0">
                <view class="" slot="head">
                    <div class="table">
                        <div class="tr">
                            <div class="td" style="width: 100%;">
                                商品评价({{tbGoods.commentNum}})
                            </div>
                            <div class="td" style="text-align: right; color: grey;" v-if="tbGoods.commentNum"
                                 @click="gotoGoodsDetailCommentList()">
                                查看全部
                            </div>
                        </div>
                    </div>
                </view>
                <view class="" slot="body">
                    <div v-if="!tbGoods.commentNum">
                        暂无评价信息...
                    </div>
                    <div v-if="tbGoods.commentNum && tbGoods.tbGoodsComment"
                         @click="gotoGoodsDetailCommentList()">

                        <view class="comment">
                            <view class="left">
                                <myImg :obj="tbGoods.tbGoodsComment" :sysFile="{fkId: tbGoods.tbGoodsComment.userId}" class="picture"
                                       :customStyle="'pointer-events: none; height: 50px;  width:50px; border-radius: 50%; background-size: cover; background-repeat: no-repeat; background-position: center;'"
                                       :defaultUrl="'/static/default-image/user-avatar.png'" :imageView="'imageView2/1/w/50/h/50'"></myImg>
                            </view>
                            <view class="right">
                                <!--评价内容-->
                                <view class="top">
                                    <div>
                                        <div style="font-size: 12px; color: #777;" v-if="tbGoods.tbGoodsComment.tbOrderGoods">
                                            规格：{{tbGoods.tbGoodsComment.tbOrderGoods.specName}} &nbsp;
                                            <label v-if="tbGoods.tbGoodsComment.tbOrderGoods.colorId">颜色：{{tbGoods.tbGoodsComment.tbOrderGoods.colorName}}</label>
                                        </div>
                                        <view class="name">
                                            {{tbGoods.tbGoodsComment.name}}
                                            <u-tag plain type="error" size="mini" style="margin-left: 5px;"
                                                   v-if="tbGoods.tbGoodsComment.userId === tbGoods.tbStore.userId">店主
                                            </u-tag>
                                        </view>
                                    </div>
                                    <view class="like" :class="{ highlight: tbGoods.tbGoodsComment.isLike }">
                                        <view class="num">{{ tbGoods.tbGoodsComment.likeNum }}</view>
                                        <u-icon v-if="!tbGoods.tbGoodsComment.isLike" name="thumb-up" :size="30" color="#9a9a9a"></u-icon>
                                        <u-icon v-if="tbGoods.tbGoodsComment.isLike" name="thumb-up-fill" :size="30"></u-icon>
                                    </view>
                                </view>
                                <view class="content">{{ tbGoods.tbGoodsComment.content }}</view>

                                <!--回复内容-->
                                <view class="reply-box" v-if="tbGoods.tbGoodsComment.replyNum">
                                    <view class="item" v-for="(reply, index) in tbGoods.tbGoodsComment.replyList" :key="reply.index">
                                        <view class="username">{{ reply.name }}</view>
                                        <view class="text">{{ reply.content }}</view>
                                    </view>
                                    <view class="all-reply" v-if="tbGoods.tbGoodsComment.replyList != undefined">
                                        共{{ tbGoods.tbGoodsComment.replyNum }}条回复
                                        <u-icon class="more" name="arrow-right" :size="26"></u-icon>
                                    </view>
                                </view>

                                <view class="bottom">
                                    {{tbGoods.tbGoodsComment.showTime}}
                                    <view class="reply">回复</view>
                                </view>
                            </view>
                        </view>
                    </div>
                </view>
            </u-card>

            <!--秒杀商品-->
            <goodsDetailSeckillGoods v-if="tbGoods" :storeId="tbGoods.storeId"></goodsDetailSeckillGoods>

            <u-card :title="'商品详情'" margin="0px 0px 10px 0px" :border="false" border-radius="0" :body-style="{padding: '0px'}">
                <view class="" slot="body">
                    <!--查找商品详情广告模板-->
                    <div class="bg-content" style="margin: 0px 0px 0px 0px;"
                         v-if="tbGoods.tbGoodsDetailAdTemplate && (tbGoods.tbGoodsDetailAdTemplate.position === '0' || tbGoods.tbGoodsDetailAdTemplate.position === '2')">
                        <goodsDetailAdTemplate :goodsDetailAdTemplateId="tbGoods.goodsDetailAdTemplateId"></goodsDetailAdTemplate>
                    </div>

                    <!--查找商品详情商品推荐模板-->
                    <div class="bg-content" style="margin: 0px 0px 10px 0px;"
                         v-if="tbGoods.tbGoodsDetailGoodsRecommendTemplate && (tbGoods.tbGoodsDetailGoodsRecommendTemplate.position === '0' || tbGoods.tbGoodsDetailGoodsRecommendTemplate.position === '2')">
                        <goodsDetailGoodsRecommendTemplate
                                :goodsDetailGoodsRecommendTemplateId="tbGoods.goodsDetailGoodsRecommendTemplateId"></goodsDetailGoodsRecommendTemplate>
                    </div>

                    <div style="display: inline-block; width: 100%;">
                        <div v-for="(item, index) in tbGoods.sysFileList" :key="item.id">
                            <u-image :src="item.content" alt="图片加载失败"
                                     v-if="item.type === 'image/jpeg' && item.typeMark === 'goodsDetail'" mode="widthFix"
                                     style="pointer-events: none; width:100%;"/>
                            <div class="textCotent" v-if="item.type === 'html' && item.typeMark === 'goodsDetail'" v-html="item.content"></div>
                        </div>
                    </div>
                </view>
            </u-card>
            <u-card :title="'售后服务'" margin="0px 0px 10px 0px" :border="false" border-radius="0">
                <view class="" slot="body" style="line-height: 1.5;">
                    <div>维修有效期：{{tbGoodsAfterSale['0']}}</div>
                    <div>退货有效期：{{tbGoodsAfterSale['1']}}</div>
                    <div>换货有效期：{{tbGoodsAfterSale['2']}}</div>
                </view>
            </u-card>

            <!--查找商品详情广告模板-->
            <div style="margin: 0px 0px 0px 0px;"
                 v-if="tbGoods.tbGoodsDetailAdTemplate && (tbGoods.tbGoodsDetailAdTemplate.position === '1' || tbGoods.tbGoodsDetailAdTemplate.position === '2')">
                <goodsDetailAdTemplate :goodsDetailAdTemplateId="tbGoods.goodsDetailAdTemplateId"></goodsDetailAdTemplate>
            </div>

            <!--查找商品详情商品推荐模板-->
            <div style="margin: 0px 0px 10px 0px;"
                 v-if="tbGoods.tbGoodsDetailGoodsRecommendTemplate && (tbGoods.tbGoodsDetailGoodsRecommendTemplate.position === '1' || tbGoods.tbGoodsDetailGoodsRecommendTemplate.position === '2')">
                <goodsDetailGoodsRecommendTemplate
                        :goodsDetailGoodsRecommendTemplateId="tbGoods.goodsDetailGoodsRecommendTemplateId"></goodsDetailGoodsRecommendTemplate>
            </div>
        </div>

        <view class="navigation">
            <view class="left">
                <!--<view class="item">-->
                <!--<u-icon name="server-fill" :size="40" :color="$u.color['contentColor']"></u-icon>-->
                <!--<view class="text u-line-1">客服</view>-->
                <!--</view>-->
                <view class="item" @click="collectGoods()">
                    <u-icon name="heart" :size="40" :color="$u.color['contentColor']" v-if="!isCollected"></u-icon>
                    <u-icon name="heart-fill" :size="40" :color="$u.color['error']" v-if="isCollected"></u-icon>
                    <view class="text u-line-1">收藏商品</view>
                </view>
                <view class="item" @click="navigateTo(`/pages/common/store/index?storeId=${tbGoods.storeId}`)">
                    <u-icon name="/static/icon/shop.png" :size="40" :color="$u.color['contentColor']"></u-icon>
                    <view class="text u-line-1">店铺</view>
                </view>
                <view class="item car" @click="navigateTo(`/pages/common/goods-detail/goods-detail-shopping-cart/index`)">
                    <u-badge class="car-num" v-if="shoppingCartGoodsNumber" :count="shoppingCartGoodsNumber" type="error" :offset="[-3, -6]"></u-badge>
                    <u-icon name="shopping-cart" :size="40" :color="$u.color['contentColor']"></u-icon>
                    <view class="text u-line-1">购物车</view>
                </view>
            </view>
            <view class="right">
                <view class="cart btn u-line-1" @click="addShoppingCart()">加入购物车</view>
                <view class="buy btn u-line-1" @click="immediatelyOrder()">立即购买</view>
            </view>
        </view>

        <goodsDetailSelect ref="goodsDetailSelectRef" @addedEmit="findTbShoppingCartCount()"></goodsDetailSelect>
        <tbStoreCouponSelect ref="tbStoreCouponSelectRef"></tbStoreCouponSelect>
        <tbStorePromotion ref="tbStorePromotionRef"></tbStorePromotion>
    </view>
</template>

<script>

    import goodsDetailSelect from '@/components/goods-detail-select.vue'
    import goodsDetailSeckillGoods from './goods-detail-seckill-goods/index.vue'
    import goodsDetailAdTemplate from './goods-detail-ad-template/index.vue'
    import goodsDetailGoodsRecommendTemplate from './goods-detail-goods-recommend-template/index.vue'
    import {TbGoodsService} from "../../../dev/services/tb-goods.service";
    import tbStoreCouponSelect from '@/components/tb-store-coupon-select.vue'
    import tbStorePromotion from '@/components/tb-store-promotion.vue'
    import {TbCollectUserGoodsService} from "../../../dev/services/tb-collect-user-goods.service";
    import {TbShoppingCartService} from "../../../dev/services/tb-shopping-cart.service";
    import myImg from '@/components/my-img'
    import {CommonUtil} from "../../../dev/core/utils/common.util";
    import {toValue} from "../../../dev/core/utils/filters.util";

    export default {
        data() {
            return {
                goodsId: null,
                tbGoods: null,
                slideList: [],
                isCollected: false,
                shoppingCartGoodsNumber: 0,

                // 售后服务
                tbGoodsAfterSale: {
                    0: '未提供该项售后服务。',  // 维修
                    1: '未提供该项售后服务。',  // 退货
                    2: '未提供该项售后服务。',  // 换货
                }
            }
        },
        components: {
            goodsDetailSelect,
            goodsDetailSeckillGoods,
            goodsDetailAdTemplate,
            goodsDetailGoodsRecommendTemplate,
            tbStoreCouponSelect,
            tbStorePromotion,
            myImg
        },
        onLoad(options) {
            const _self = this
            console.log(options);
            _self.goodsId = options.id
            _self.tbGoods = null
            new TbGoodsService().findGoodsDetail(_self.goodsId).then(detail => {
                detail.quantity = 1;
                _self.tbGoods = detail;
                if (_self.tbGoods.tbGoodsComment) {
                    if (!_self.tbGoods.tbGoodsComment.isAnonymous) {
                        _self.tbGoods.tbGoodsComment.name = toValue('tbGoods.tbGoodsComment.sysUser.name', _self.tbGoods, '昵称未设置');
                    } else {
                        _self.tbGoods.tbGoodsComment.name = '匿名用户' + CommonUtil.randomStr();
                    }
                }

                // 覆盖默认属性
                if (options.title) {
                    _self.tbGoods = Object.assign(_self.tbGoods, {
                        title: options.title,
                        price: Number(options.price),
                        marketPrice: Number(options.marketPrice),
                        specificationId: options.specificationId,
                        colorId: options.colorId,
                    });
                }

                _self.slideList = _self.tbGoods.sysFileList.filter(item => {
                    return item.typeMark === 'goodsHead'
                });

                // 如果没有商品颜色，则规格价格为0时，不能选择该规格
                if (!_self.tbGoods.tbGoodsColorList.length) {
                    _self.tbGoods.tbGoodsSpecificationList.forEach(tbGoodsSpecification => {
                        tbGoodsSpecification.disabled = true
                        if (tbGoodsSpecification.stockNumber && tbGoodsSpecification.price > 0) {
                            tbGoodsSpecification.disabled = false
                        }
                    })
                }

                // 售后服务
                _self.tbGoods.tbGoodsAfterSaleList.forEach((item, index) => {
                    _self.tbGoodsAfterSale[index] = item.days + '天内。';
                })
                console.log(_self.tbGoodsAfterSale)
            });

            // 是否收藏商品
            new TbCollectUserGoodsService().isCollectedGoods({
                communityId: _self.globalVariable.userInfo.tbCommunity.id,
                userId: _self.globalVariable.userInfo.id,
                goodsId: _self.goodsId,
            }).then(result => {
                _self.isCollected = result.id;
            });
        },
        onShow() {
            this.findTbShoppingCartCount();
        },
        methods: {
            findTbShoppingCartCount() {
                const _self = this;
                // 查询加入到购物车的商品数量
                new TbShoppingCartService().findTbShoppingCartCount({
                    communityId: this.globalVariable.userInfo.tbCommunity.id,
                    userId: this.globalVariable.userInfo.id,
                    type: '0'
                }).then(result => {
                    _self.shoppingCartGoodsNumber = result;
                });
            },
            addShoppingCart() {
                this.$refs.goodsDetailSelectRef.openGoodsDetailSelect(this.tbGoods, false);
            },
            immediatelyOrder() {
                this.$refs.goodsDetailSelectRef.openGoodsDetailSelect(this.tbGoods, true);
            },
            showCouponList() {
                this.$refs.tbStoreCouponSelectRef.openStoreCouponSelect(this.tbGoods.storeId);
            },
            showTbStorePromotion() {
                this.$refs.tbStorePromotionRef.openTbStorePromotion(this.tbGoods.tbStore.tbStorePromotion.id, '店铺');
            },
            collectGoods() {
                const _self = this;
                if (!this.isCollected) {
                    // 收藏商品
                    new TbCollectUserGoodsService().saveTbCollectUserGoods({
                        communityId: _self.globalVariable.userInfo.tbCommunity.id,
                        userId: _self.globalVariable.userInfo.id,
                        goodsId: _self.tbGoods.id,
                        storeId: _self.tbGoods.storeId,
                    }).then(result => {
                        _self.isCollected = result.id;
                    });
                } else {
                    // 移除收藏商品
                    new TbCollectUserGoodsService().deleteTbCollectUserGoods({
                        id: _self.isCollected
                    }).then(result => {
                        _self.isCollected = false;
                    });
                }
            },
            gotoGoodsDetailCommentList() {
                if (this.globalVariable.tempData.tbGoodsCommentList) {
                    this.globalVariable.tempData.tbGoodsCommentList = this.globalVariable.tempData.tbGoodsCommentList.filter(item => item.id !== this.tbGoods.tbGoodsComment.id);
                    this.globalVariable.tempData.tbGoodsCommentList = [this.tbGoods.tbGoodsComment, ...this.globalVariable.tempData.tbGoodsCommentList];
                } else {
                    this.globalVariable.tempData.tbGoodsCommentList = [this.tbGoods.tbGoodsComment];
                }
                this.navigateTo(`/pages/common/goods-detail/goods-detail-comment-list/index`, {id: this.tbGoods.id, sellerId: this.tbGoods.tbStore.userId})
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import "./index.scss";
</style>
